<template>
  <div class="home">
      
      <home-nav-bar />
      <b-scroll class="centent" 
                :probe-type="3"
                ref="scroll">
        <div>
          <home-swiper :banners="banners" />
          <menu-bar />
          <related-play :related-play-list="relatedPlayList" />
          <new-song-list />
        </div>
      </b-scroll>
  </div>
</template>

<script>

import HomeNavBar from "./homeChild/HomeNavBar.vue";
import HomeSwiper from "./homeChild/HomeSwiper.vue";
import MenuBar from "./homeChild/MenuBar.vue";
import RelatedPlay from "./homeChild/RelatedPlay.vue";
import NewSongList from "./homeChild/NewSongList.vue";

import BScroll from "@/components/common/scroll/BScroll.vue";
import {
  getHomeBanner,
  getHomePage,
  relatedPlayList,
  
} from "@/network/home";
export default {
  name: "Home",
  data() {
    return {
      banners: [], //保存首页轮播图数据
      relatedPlayList: [], //保存首页推荐歌单数据
      scrollY: 0, //y轴位置
    };
  },
  components: {
    HomeNavBar,
    HomeSwiper,
    MenuBar,
    RelatedPlay,
    BScroll,
    NewSongList,
  },

  created() {
    /**
     * 调用网络请求相关方法
     */
    this.getHomeBanner();
    this.getHomePage();
  },
  activated() {
    this.$refs.scroll.bs.refresh();
  },
  deactivated() {
    this.scrollY = this.$refs.scroll.bs.y;
    console.log(this.scrollY); 
  },
  methods: {
    /**
     * 网络请求相关方法
     */
    getHomeBanner() {
      getHomeBanner().then((res) => {
        this.banners = res.banners;
      });
    },
    getHomePage() {
      getHomePage().then((res) => {
        //获取首页推荐歌单信息
        for (let item in res.data.blocks[1].creatives) {
          this.relatedPlayList.push(
            new relatedPlayList(res.data.blocks[1].creatives[item])
          );
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.centent {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>
